<template>

	<view class="history-data">
		<view class="mask-more" v-if='showMoreMask'>
			<view class="tips_join" style="position:relative">
				<view class="" style="display: flex;align-items: center;">
					<image src="../../../static/images/tip.png" style="width:40rpx;height:40rpx" mode=""></image>
					<text style="font-size: 16px;font-weight: bold;margin-left: 10rpx;color: #FF5310;">温馨提示</text>
				</view>

				<view class="" style='position:absolute;right:18rpx;top:20rpx;display:flex;font-size:24rpx'>
					<!-- <view class="" @click="addSymptom">
						填写症状
					</view> -->
					<view class="" style="margin-left:50rpx">
						<image src="../../../static/images/x.png" mode="" style="width:40rpx;height:40rpx"
							@click='showMoreMask=false'></image>
					</view>
				</view>
			</view>
			<view class="content" style="height: 600rpx;overflow: auto;width:100%;color:#0052d9">
				<view v-for="(ele,idx) in msgList" :key='idx' class=""
					style="display: flex;align-items: center;justify-content: space-between;margin-top:12rpx">

					<view class="timer" style="display: flex;align-items: center;">

						<view class="">
							{{ele.createTime.substring(11,ele.createTime.length-3)}}
						</view>
						<view class="" style="margin-left:120rpx">
							{{ele.updateBy}}℃
						</view>
					</view>
					<view class="" style='font-size:14px'>
						{{ele.message}}
					</view>
				</view>
			</view>

		</view>
		<view class="mask" v-if='showWriteSymptom'>
			<view class="content">
				<view class="header">
					填写症状
				</view>
				<view class="content-main">
					<!-- 	<view>
						<u-datetime-picker :show="show" v-model="value1" mode="datetime"></u-datetime-picker>
						<u-button @click="show = true">打开</u-button>
					</view> -->

					<view class="symptom-content">
						<view class="symptom-top">
							症状选择
						</view>
						<view class="list-content">
							<view class="list" @click="changeActiveList(item)" v-for='(item,idx) in symptomList'
								:key='idx' :class="{'active-list':item.id===activeNavId}">
								{{item.title}}
							</view>
						</view>
						<view class="btn-container">
							<view class="cancel-btn" @click="showWriteSymptom=false">
								取消
							</view>
							<view class="confirm-btn" @click="showWriteSymptom=false">
								提交
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>

		<!-- 标题 -->
		<view class="navbar">
			<u-icon @click="navigateBack" class="icon-left" name="arrow-left" color="#333" size="50"></u-icon>
			<text>历史数据</text>

		</view>
		<!-- 时间选择 -->
		<view class="calendar" @click="calendarOptions.show= true">
			<u-icon name="arrow-left" style="float: left;padding-top: 25rpx;"></u-icon>
			<image style="width: 40rpx;height: 40rpx;position: absolute;top: 23%;left: 34%;"
				src="https://srmzln.oss-cn-hangzhou.aliyuncs.com/znl/images/calendar.png" mode=""></image>
			<text style="position: absolute;top: 2%;padding-left: 10rpx;left: 40%;">{{pageOptions.time}}</text>
			<u-icon name="arrow-right" style="float: right;padding-top: 25rpx;"></u-icon>
		</view>

		<!-- 统计 -->
		<view class="Statistics">
			<view class="echarts-wrap" style="width:100%;height:580rpx" @click='chartClick'>
				<uni-ec-canvas class="uni-ec-canvas" id="line-chart" ref="canvas"
					v-on:handle-change='handleLegendChange' canvas-id="lazy-load-chart" :ec="ec">
				</uni-ec-canvas>

				<!--   <mpvue-echarts class="ec-canvas" :onInit="initChart" canvasId="demo-canvas" id='main' ref="chart1" /> -->
			</view>

			<!-- 	<qiun-data-charts type="line" :chartData="chartData" class="uni-ec-canvas" :ontouch="true" /> -->
			<!-- 	<view style="width: 100%; height:500rpx">
				<l-echart ref="chart" id='chart'></l-echart>
			</view> -->

			<view class="john_chart_title">
				<view class="item" style="display: flex;">
					<view style="color:#2397ee;font-size: 10px;">.........................</view>
					<view class="hr2" style="margin-left:4rpx">低温预警线</view>
				</view>
				<view class="item" style="display: flex;">
					<view style="color:#D41F2D;font-size: 10px;">.........................</view>
					<view class="hr4 color12" style="margin-left:4rpx;">高温预警线</view>
				</view>
			</view>





		</view>
		<view class="echarts-wrap" style="width:100%;height:420rpx;margin-top:-50rpx" @click='chartClick'>
			<uni-ec-canvas class="uni-ec-canvas" id="line-chart2" ref="canvas2" v-on:handle-change='handleLegendChange'
				canvas-id="lazy-load-chart" :ec="ec2">
			</uni-ec-canvas>


		</view>
		<view class="john_chart_title" style="margin-top:112rpx">

			<view class="item" style="display: flex;width:100%;justify-content: center;">
				<view style="color:#D41F2D;font-size: 10px;">.........................</view>
				<view class="hr4 color12" style="margin-left:4rpx;">湿度预警线</view>
			</view>
		</view>

	<view class="echarts-wrap" style="width:100%;height:420rpx;margin-top:20rpx" @click='chartClick'>
		<uni-ec-canvas class="uni-ec-canvas" id="line-chart3" ref="canvas3" v-on:handle-change='handleLegendChange'
			canvas-id="lazy-load-chart" :ec="ec3">
		</uni-ec-canvas>
	
	
	</view>
		<u-calendar v-model="calendarOptions.show" mode="date" @change="handleCalendarChange"></u-calendar>
	</view>
</template>

<script>
	// import qiunDataCharts from "@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts";
	// import mpvueEcharts from '@/components/mpvue-echarts/src/echarts';
	// import * as echarts from "../../../common/echarts.min.js";
	import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas'

	import * as echarts from '@/components/uni-ec-canvas/echarts.min.js'

	export default {
		components: {
			// qiunDataCharts,
			// mpvueEcharts,
			uniEcCanvas,

		},
		data() {
			return {
				showXYZ:false,
				jiayiList: [],
				jianyiList: [],
				huanyiList: [],
				yichangList: [],
				msgList: [],
				showMoreMask: false,
				showWriteSymptom: false,
				activeNavId: 0,
				symptomList: [{
					id: 0,
					title: '发烧'
				}, {
					id: 1,
					title: '咳嗽'
				}, {
					id: 2,
					title: '腹泻'
				}, {
					id: 3,
					title: '积食'
				}, {
					id: 4,
					title: '呕吐'
				}, {
					id: 5,
					title: '便秘'
				}, {
					id: 6,
					title: '腹胀'
				}, {
					id: 7,
					title: '添加...'
				}],
				show: true,
				value1: Number(new Date()),
				num: 3,
				maxcount: 3,
				mincount: 2,
				tb: 1,
				exp: '',
				chartData: { // charts 参数
					categories: ['8:00', '12:00', '16:00', '20:00', '24:00', '8:00', '12:00', '16:00', '20:00', '24:00'],
					series: [
						// {
						// 	format: "seriesJohn",
						// 	name: '预计',
						// 	data: [33,34,36.5,36,38,33,34,36.5,36,38]
						// },
						{
							name: '实际',
							data: [31, 37.6, 36.5, 35.8, 37.2, 31, 37.6, 36.5, 35.8, 37.2],
							markLine: { // 如图中红色标记线
								silent: true,
								symbol: false, // 不显示标记线两端端点符号
								lineStyle: {
									color: '#c37976'
								},
								data: [{
									yAxis: 37
								}],
								label: {
									show: false
								}
							}

						}
					],

				},
				calendarOptions: {
					show: false
				},
				pageOptions: {
					time: this.today()
				},
				ec3: {
					lazyLoad: true,
					option: {
						title: [], //
						// legend: {
						// 	data: ['温度', '湿度'],
						// 	selected: {
						// 		'温度': true,
						// 		'湿度': false
						// 	}
				
						// },
						grid: {
							top: 30,
							bottom: 166,
							left:48
						},
						tooltip: {
							trigger: 'axis',
							formatter: function(params) {
								// params = params[0];
								// var date = new Date(params.name);
								// var hour = date.getHours();
								// var minutes = date.getMinutes();
								// if (hour < 10) {
								// 	hour = '0' + hour;
								// }
								// if (minutes < 10) {
								// 	minutes = '0' + minutes;
								// }
								// var dateStr = hour + ':' + minutes;
								// return dateStr + ' ' + params.value[1];
							},
							axisPointer: {
								animation: false
							}
						},
						xAxis: {
							type: 'time',
							splitLine: {
								show: false
							},
							splitNumber: 8,
							axisLine: {
								lineStyle: {
									color: '#1B2232'
								}
							},
							axisLabel: {
								formatter: function(value, index) {
									console.log(value, index, 11)
									var date = new Date(value);
									var hour = date.getHours();
									var minutes = date.getMinutes();
									if (hour < 10) {
										hour = '0' + hour;
									}
									if (minutes < 10) {
										minutes = '0' + minutes;
									}
									return ':'
								},
								interval: 3,
								rotate: 60
				
							}
						},
						yAxis: {
							name: '宝宝xyz轴数据',
							nameTextStyle: {
								color: '#1B2232',
								fontSize: 15,
								padding: [0, 0, 0, 90]
							},
							type: 'value',
							min: 0,
							max: 700,
							boundaryGap: [20, '100%'],
							splitLine: {
								show: false
							},
							axisLine: {
								lineStyle: {
									color: '#1B2232'
								}
							},
							axisLabel: {
								formatter: '{value}'
							}
						},
				
						series: [{
							name: '湿度',
							center: ['30%', '54%'],
							type: 'line',
							smooth: true,
							symbol: 'circle',
							symbolSize: 5,
							showSymbol: false,
							lineStyle: {
								normal: {
									width: 1
								}
							},
							// markLine: {
							// 	silent: true,
							// 	data: [{
							// 		yAxis: 75,
							// 		lineStyle: {
							// 			color: "#D41F2D"
							// 		}
							// 	}],
							// 	lineStyle: {
							// 		normal: {
							// 			type: 'dotted',
							// 		},
							// 	},
							// },
							areaStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: 'rgba(137, 189, 27, 0.3)'
									}, {
										offset: 0.8,
										color: 'rgba(137, 189, 27, 0)'
									}], false),
									shadowColor: 'rgba(0, 0, 0, 0.1)',
									shadowBlur: 10
								}
							},
							itemStyle: {
								normal: {
									color: 'rgb(137,189,27)',
									borderColor: 'rgba(137,189,2,0.27)',
									borderWidth: 12
				
								}
							},
							data: []
						}]
					}
				
				},
				ec2: {
					lazyLoad: true,
					option: {
						title: [], //
						// legend: {
						// 	data: ['温度', '湿度'],
						// 	selected: {
						// 		'温度': true,
						// 		'湿度': false
						// 	}

						// },
						grid: {
							top: 30,
							bottom: 106
						},
						tooltip: {
							trigger: 'axis',
							formatter: function(params) {
								// params = params[0];
								// var date = new Date(params.name);
								// var hour = date.getHours();
								// var minutes = date.getMinutes();
								// if (hour < 10) {
								// 	hour = '0' + hour;
								// }
								// if (minutes < 10) {
								// 	minutes = '0' + minutes;
								// }
								// var dateStr = hour + ':' + minutes;
								// return dateStr + ' ' + params.value[1];
							},
							axisPointer: {
								animation: false
							}
						},
						xAxis: {
							type: 'time',
							splitLine: {
								show: false
							},
							splitNumber: 8,
							axisLine: {
								lineStyle: {
									color: '#1B2232'
								}
							},
							axisLabel: {
								formatter: function(value, index) {
									console.log(value, index, 11)
									var date = new Date(value);
									var hour = date.getHours();
									var minutes = date.getMinutes();
									if (hour < 10) {
										hour = '0' + hour;
									}
									if (minutes < 10) {
										minutes = '0' + minutes;
									}
									return ':'
								},
								interval: 3,
								rotate: 60

							}
						},
						yAxis: {
							name: '宝宝体表湿度变化及异常',
							nameTextStyle: {
								color: '#1B2232',
								fontSize: 15,
								padding: [0, 0, 0, 150]
							},
							type: 'value',
							min: 20,
							max: 100,
							boundaryGap: [0, '100%'],
							splitLine: {
								show: false
							},
							axisLine: {
								lineStyle: {
									color: '#1B2232'
								}
							},
							axisLabel: {
								formatter: '{value}'
							}
						},

						series: [{
							name: '湿度',
							center: ['30%', '54%'],
							type: 'line',
							smooth: true,
							symbol: 'circle',
							symbolSize: 5,
							showSymbol: false,
							lineStyle: {
								normal: {
									width: 1
								}
							},
							markLine: {
								silent: true,
								data: [{
									yAxis: 75,
									lineStyle: {
										color: "#D41F2D"
									}
								}],
								lineStyle: {
									normal: {
										type: 'dotted',
									},
								},
							},
							areaStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: 'rgba(137, 189, 27, 0.3)'
									}, {
										offset: 0.8,
										color: 'rgba(137, 189, 27, 0)'
									}], false),
									shadowColor: 'rgba(0, 0, 0, 0.1)',
									shadowBlur: 10
								}
							},
							itemStyle: {
								normal: {
									color: 'rgb(137,189,27)',
									borderColor: 'rgba(137,189,2,0.27)',
									borderWidth: 12

								}
							},
							data: []
						}]
					}

				},
				ec: {
					lazyLoad: true,
					option: {
						title: [], //
						// legend: {
						// 	data: ['温度', '湿度'],
						// 	selected: {
						// 		'温度': true,
						// 		'湿度': false
						// 	}

						// },
						grid: {
							top: 30,
							bottom: 80
						},
						tooltip: {
							trigger: 'axis',
							formatter: function(params) {
								// params = params[0];
								// var date = new Date(params.name);
								// var hour = date.getHours();
								// var minutes = date.getMinutes();
								// if (hour < 10) {
								// 	hour = '0' + hour;
								// }
								// if (minutes < 10) {
								// 	minutes = '0' + minutes;
								// }
								// var dateStr = hour + ':' + minutes;
								// return dateStr + ' ' + params.value[1];
							},
							axisPointer: {
								animation: false
							}
						},
						xAxis: {
							type: 'time',
							splitLine: {
								show: false
							},
							splitNumber: 8,
							axisLine: {
								lineStyle: {
									color: '#1B2232'
								}
							},
							axisLabel: {
								formatter: function(value, index) {
									console.log(value, index, 11)
									var date = new Date(value);
									var hour = date.getHours();
									var minutes = date.getMinutes();
									if (hour < 10) {
										hour = '0' + hour;
									}
									if (minutes < 10) {
										minutes = '0' + minutes;
									}
									return ':'
								},
								interval: 3,
								rotate: 60

							}
						},
						yAxis: {
							name: '宝宝体表温度变化及异常',
							nameTextStyle: {
								color: '#1B2232',
								fontSize: 15,
								padding: [0, 0, 0, 150]
							},
							type: 'value',
							min: 20,
							max: 40,
							boundaryGap: [0, '100%'],
							splitLine: {
								show: false
							},
							axisLine: {
								lineStyle: {
									color: '#1B2232'
								}
							},
							axisLabel: {
								formatter: '{value}'
							}
						},

						series: [{
								name: '温度',
								type: 'line',
								hoverAnimation: false,
								smooth: true,
								symbolSize: 0,
								data: [],
								markLine: {
									silent: true,
									data: [{
										yAxis: 31,
										lineStyle: {
											color: '#2397ee'
										}
									}, {
										yAxis: 37,
										lineStyle: {
											color: "#D41F2D"
										}
									}],
									lineStyle: {
										normal: {
											type: 'dotted',
										},
									},
								},
								markArea: {
									// data: [
									// [{
									// 	name: '咳嗽',
									// 	x: '16%'
									// }, {
									// 	x: '25%'
									// }],
									// [{
									// 	name: '发烧',
									// 	x: '30%'
									// }, {
									// 	x: '40%'
									// },
									// ],
									// ]
								}

							},

						]
					}

				},

			}

		},
		onShow() {

			//this.histroyData();

		},

		mounted() {

		    this.stateData()
			this.getDevice()
			// this.getMsgList()


		},
		onLoad() {
			// this.$refs.canvas.init(this.initChart)
		},
		onReady() {
			setTimeout(() => {
				console.log(this)
				console.log(this.$refs)
				this.$refs['canvas'].init()

				console.log('延迟加载了')

			}, 1000) // 两秒之后延迟加载  

			setTimeout(() => {
				this.$refs['canvas2'].init()
				//this.ec.option.series[0].data = [120, 132, 101, 134, 90, 230, 210]  
				// this.ec.option.xAxis[0].data = [1,2,3,4,5,6,7]  
				// 如果是data数组内的数据 记得用$set  
				console.log('数据更改了')

			}, 2000)
			setTimeout(() => {
				let zwxphone = uni.getStorageSync('zwxphone');
			
				
					if(zwxphone=='13879171577'||zwxphone==='18279124451'||zwxphone==='13970942033'){
						this.showXYZ = true
						this.$refs['canvas3'].init()
					}
				
				//this.ec.option.series[0].data = [120, 132, 101, 134, 90, 230, 210]  
				// this.ec.option.xAxis[0].data = [1,2,3,4,5,6,7]  
				// 如果是data数组内的数据 记得用$set  
				console.log('数据更改了')
			
			}, 3000)
		},
		methods: {
			handleLegendChange(e) {
				console.log(e, 333)
				if ((e.name === '湿度' && e.selected['湿度'] || (e.name === '温度' && !e.selected['温度']))) {
					console.log(111)
					this.ec.option.legend.selected = {
						'温度': false,
						'湿度': true
					}
					this.ec.option.yAxis.max = 100
				} else {
					console.log(222)
					this.ec.option.legend.selected = {
						'温度': true,
						'湿度': false
					}
					this.ec.option.yAxis.max = 40
				}
			},
			getHistoryMsg(e) {
				if (e === 0) {
					this.msgList = this.jiayiList
				} else if (e === 1) {
					this.msgList = this.jianyiList
				} else if (e === 2) {
					this.msgList = this.huanyiList
				} else {
					this.msgList = this.yichangList
				}
			},
			getMsgList() {
				this.$api.getDeviceList().then(res => {
					let list = []
					if (res.code === 200) {
						list = res.result.list

						list.forEach(ele => {
							if (ele.deviceStatus === 'Y') {

								this.$api.getHistoryMsgList({
									date: this.pageOptions.time
								}).then(res => {
									if (res.code === 200) {
										let list1 = res.result.jiayi
										const arr1 = []
										if (list1.length) {
											list1.forEach((ele, idx) => {
												if (idx === 0 || list1[idx].createTime
													.substring(11, list1[idx].createTime
														.length - 3) !== list1[idx - 1]
													.createTime.substring(11, list1[
															idx - 1].createTime
														.length - 3)) {
													arr1.push(ele)
												}

											})
											this.jiayiList = arr1
										}



										let list2 = res.result.jianyi
										const arr2 = []
										if (list2.length) {
											list2.forEach((ele, idx) => {
												if (idx === 0 || list2[idx].createTime
													.substring(11, list2[idx].createTime
														.length - 3) !== list2[idx - 1]
													.createTime.substring(11, list2[
															idx - 1].createTime
														.length - 3)) {
													arr2.push(ele)
												}

											})
											this.jianyiList = arr2
										}


										let list3 = res.result.huanyi
										const arr3 = []
										if (list3.length) {
											list3.forEach((ele, idx) => {
												if (idx === 0 || list3[idx].createTime
													.substring(11, list3[idx].createTime
														.length - 3) !== list3[idx - 1]
													.createTime.substring(11, list3[
															idx - 1].createTime
														.length - 3)) {
													arr3.push(ele)
												}

											})
											this.huanyiList = arr3
										}


										let list4 = res.result.yichang
										const arr4 = []
										if (list4.length) {
											list4.forEach((ele, idx) => {
												if (idx === 0 || list4[idx].createTime
													.substring(11, list4[idx].createTime
														.length - 3) !== list4[idx - 1]
													.createTime.substring(11, list4[
															idx - 1].createTime
														.length - 3)) {
													arr4.push(ele)
												}

											})
											this.yichangList = arr
										}
									}

								})
							}
						})
					}
				})
			},
			showDetail(e) {
				this.getHistoryMsg(e)
				this.showMoreMask = true
			},
			getDevice() {
				// this.$api.getDeviceInfo().then(res => {
				// 	if (res.code === 200) {
				// 		this.ec.option.series[0].markLine.data[0].yAxis = res.result.mintemp
				// 		this.ec.option.series[0].markLine.data[1].yAxis = res.result.maxtemp
				// 	}
				// })
			},
			now() {
				var myDate = new Date();
				var year = myDate.getFullYear(); //获取当前年
				var mon = myDate.getMonth() + 1; //获取当前月
				if (mon < 10) {
					mon = "0" + mon;
				}
				var date = myDate.getDate(); //获取当前日
				if (date < 10) {
					date = "0" + date;
				}
				var hours = myDate.getHours(); //获取当前小时
				if (hours < 10) {
					hours = "0" + hours;
				}
				var minutes = myDate.getMinutes(); //获取当前分钟
				if (minutes < 10) {
					minutes = "0" + minutes;
				}
				var seconds = myDate.getSeconds(); //获取当前秒
				if (seconds < 10) {
					seconds = "0" + seconds;
				}
				let dates = `${year}-${mon}-${date} ${hours}:${minutes}:${seconds}`
				return dates

			},
			today() {
				var myDate = new Date();
				var year = myDate.getFullYear(); //获取当前年
				var mon = myDate.getMonth() + 1; //获取当前月
				if (mon < 10) {
					mon = "0" + mon;
				}
				var date = myDate.getDate(); //获取当前日
				if (date < 10) {
					date = "0" + date;
				}
				var hours = myDate.getHours(); //获取当前小时
				if (hours < 10) {
					hours = "0" + hours;
				}
				var minutes = myDate.getMinutes(); //获取当前分钟
				if (minutes < 10) {
					minutes = "0" + minutes;
				}
				var seconds = myDate.getSeconds(); //获取当前秒
				if (seconds < 10) {
					seconds = "0" + seconds;
				}
				let dates = `${year}-${mon}-${date}`
				return dates
			
			},
			chartClick() {
				// this.showWriteSymptom = true

				// uni.navigateTo({
				// 	url: '/pages/index/histroy/HistroyWriteSymptom'
				// });
			},
			// changeSymptom() {
			// 	this.showWriteSymptom = false
			// 	this.$refs['canvas'].init()
			// },
			changeActiveList(item) {
				console.log(item, 88)
				this.activeNavId = item.id
			},

			async histroyData() {

				let tpl_param = {
					date: this.now()

				};
				uni.showLoading({
					title: '加载中',
					mask: true,
				});
				let res = await this.$api.histroyData(tpl_param);
				if (res.code == 200) {
					this.chartData.series = res.result.series;
					this.chartData.categories = res.result.categories;
					this.maxcount = res.result.maxcount;
					this.mincount = res.result.mincount;
					this.tb = res.result.tb;
					this.exp = res.result.exp
					// this.ec.option.series[0].data = res.result.series[1].data
				} else {
					uni.showToast({
						title: res.message || '获取数据失败'
					});
				}
				// uni.hideLgoading();

			},
			async stateData() {
				this.ec.option.series[0].data = []
				this.ec2.option.series[0].data = []
				let timer = ''
				// console.log(this.pageOptions.time,66,this.today())
				if(this.pageOptions.time===this.today()){
					timer = this.now()
				}else{
					timer = `${this.pageOptions.time} 23:59:59`
				}
				let tpl_param = {
					date: timer
					// code:'460080734800007'
				};
				
				uni.showLoading({
					title: '加载中',
					mask: true,
				});
				let res = await this.$api.searchDeviceState(tpl_param);
				if (res.code === 200) {
					console.log(111, res.result)
					const originData = res.result.list[0].dayTemperature
					const filterData = []
					const data = []
					if (originData.length) {
						originData.forEach((ele, idx) => {
								if (idx === 0 || (idx === (originData.length - 1))) {
								data.push(ele)
							} else {
							
								const timer = new Date(Date.parse(ele.uptime.replace(/-/g,
									'/'))).getTime()
						
								const timer2 = new Date(Date.parse(originData[idx + 1].uptime.replace(/-/g,
									'/'))).getTime()
										// console.log(timer,11,timer2,33)
								if (timer < timer2) {
									data.push(ele)
								}
							}
						})

				}

		
				const list = res.result.list[0].symptomList

				const part = Math.floor(data.length / 24)

				const arr = []
				const arr2 = []
				const arr3 = []
				const symptom = []
				// if (part > 0) {
				// 	for (let i = 0; i <= 24; i++) {
				// 		arr.push(data[i * part])
				// 	}
				// 	console.log(arr, 3312, part)
				// 	this.ec.option.series[0].data = arr
				// }
				if (data.length) {
					data.forEach(ele => {
						arr.push({
							'name': new Date(Date.parse(ele.uptime.replace(/-/g,
								'/'))).getTime(),
							'value': [new Date(Date.parse(ele.uptime.replace(/-/g,
									'/')))
								.getTime(), ele.temp1
							]
						})
						arr2.push({
							'name': new Date(Date.parse(ele.uptime.replace(/-/g,
								'/'))).getTime(),
							'value': [new Date(Date.parse(ele.uptime.replace(/-/g,
									'/')))
								.getTime(), ele.humidity
							]
						})
						arr3.push({
							'name': new Date(Date.parse(ele.uptime.replace(/-/g,
								'/'))).getTime(),
							'value': [new Date(Date.parse(ele.uptime.replace(/-/g,
									'/')))
								.getTime(), ele.xdata
							]
						})
					})
					console.log(arr, 77)
					this.ec.option.series[0].data = arr
					this.ec2.option.series[0].data = arr2
					this.ec3.option.series[0].data = arr3
				}
				if (list.length) {
					let name = list[0].symptom
					let start = list[0].start
					let end = list[0].end
					let startIdx = 0
					let endIdx = 0

					data.forEach((ele, i) => {
						let date1 = Date.parse(start);
						let date2 = Date.parse(ele.uptime)
						let date3 = Date.parse(end);
						console.log(date1, date2, date3)
						if (date1 >= date2) {
							startIdx = i
						}
						if (date3 >= date2) {
							endIdx = i
						}
					})
					console.log(startIdx, 110, endIdx, new Date(start), 33, new Date(end))
					if (endIdx !== 0) {
						let s = startIdx / (data.length - 1)
						let e = endIdx / (data.length - 1)
						console.log(s.toFixed(2), 11, e)
						let sym = [{
							name: name,
							x: `${s.toFixed(2)*100}%`
						}, {
							x: `${e.toFixed(2)*100}%`
						}]

						// list.forEach(ele => {
						// 	symptom.push([{
						// 		name: ele.symptom,
						// 		xAxis: ele.start
						// 	}, {
						// 		xAxis: ele.end
						// 	}])
						// })
						console.log(sym, 113)
						// this.ec.option.series[0].markArea.data = []
						// this.ec.option.series[0].markArea.data.push(sym)
					}

				} else {
					this.ec.option.series[0].markArea.data = []
				}


			} else {
				uni.showToast({
					title: res.message || '获取数据失败'
				});
			}
			// uni.hideLgoading();

		},

		navigateBack() {
			uni.switchTab({
				url: '../index'
			})
		},
		handleCalendarChange(e) { // 选择日期
			console.log(e)
			this.pageOptions.time = e.result
			this.stateData()
		}
	}
	}
</script>
<style scoped lang="scss">
	.mask-more {
		position: fixed;
		z-index: 166;
		margin: 15rpx 15rpx;
		padding: 15rpx 30rpx;
		box-sizing: border-box;
		bottom: 30rpx;
		background: #F6F7FB;
		border-radius: 6rpx;
		height: 766rpx;
		width: 100%;
	}

	.Tips {
		display: flex;
		margin: 20rpx;
		margin-top: 50rpx;
	}

	.Tips>view {
		height: 250rpx;
		background-color: #F6F7FB;
		border-radius: 30rpx;

		box-shadow: 1px 1px 2px rgb(228, 227, 227), 0 0 5px rgb(228, 227, 227), 0 0 1px rgb(228, 227, 227);
	}

	// 温馨提示
	.tips_join {
		flex: 1;
		padding: 20rpx;
	}

	.tips_join>image {
		width: 40rpx;
		height: 40rpx;
	}

	.tips_join>view {
		// margin-top: 10rpx;
		text-align: center;
		font-size: 16px;
		color: #253DC2;
	}

	.tips_join>text {
		font-size: 16px;
		font-weight: bold;
		margin-left: 10rpx;
		color: #FF5310;
	}

	.uni-ec-canvas {
		width: 100%;
		height: 100%;
		display: block;
	}

	.history-data {
		overflow: hidden;
	}

	.mask {
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		padding: 0 16rpx;
		position: absolute;
		box-sizing: border-box;
		z-index: 3333;

		.content {
			height: 680rpx;
			width: 100%;
			border-radius: 8rpx;
			background-color: #fff;
			margin-top: 35%;

			.header {
				width: 100%;
				height: 80rpx;
				color: #fff;
				text-align: center;
				line-height: 80rpx;
				font-size: 18px;
				font-weight: bold;
				background: #3370ff;
				border-top-left-radius: 8rpx;
				border-top-right-radius: 8rpx;
			}

			.content-main {
				width: 100%;
				padding: 18rpx;
				box-sizing: border-box;

				.symptom-content {
					width: 100%;

					.symptom-top {
						color: #3370ff;
						border-left: 5px solid #007AFF;
						padding-left: 10rpx;
					}

					.list-content {
						display: flex;
						width: 100%;
						flex-wrap: wrap;

						.list {
							min-width: 80rpx;
							margin: 12rpx 28rpx;
							padding: 3px 22rpx;
							box-sizing: border-box;
							background: #f1f1f1;
							border-radius: 6rpx;

							&.active-list {
								background: #3370ff !important;
								color: #fff !important;
							}
						}

					}

					.btn-container {
						width: 100%;
						padding: 60rpx 20%;
						box-sizing: border-box;

						.cancel-btn {
							width: 100%;
							text-align: center;
							line-height: 58rpx;
							height: 58rpx;
							border: 1rpx solid #999;
							border-radius: 8rpx;
						}

						.confirm-btn {
							margin-top: 30rpx;
							width: 100%;
							text-align: center;
							line-height: 58rpx;
							height: 58rpx;
							color: #fff;
							background: #3370ff;
							border-radius: 8rpx;
						}
					}
				}
			}
		}
	}

	.navbar {
		margin-top: 90rpx;
		margin-bottom: 20rpx;
		width: 750rpx;
	}

	.navbar>text {
		font-size: 36rpx;
		font-weight: bold;
		padding-left: 220rpx;
	}

	.icon-left {
		margin-top: 20rpx;
		margin-left: 10rpx;
	}

	// 日历
	.calendar {
		background-color: rgb(241, 241, 241);
		position: relative;
		height: 80rpx;
		line-height: 80rpx;
		margin-left: 25rpx;
		margin-right: 25rpx;
		padding-left: 50rpx;
		padding-right: 50rpx;
		border-radius: 50rpx;
	}

	// 统计
	.Statistics {
		height: 680rpx;
	}

	// 提醒

	.remind {
		padding: 30rpx;
		border-radius: 50rpx 50rpx 0rpx 0rpx;
		height: 600rpx;
		background-color: rgb(68, 92, 223);
	}

	.one {
		background-color: #fff;
		border-radius: 50rpx;
		margin-top: 30rpx;
		height: 100rpx;
		line-height: 100rpx;
		padding-left: 60rpx;
		color: rgb(45, 71, 203);
		font-size: 36rpx;
		font-family: STSong;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-right: 60rpx;
	}

	.one>image {
		width: 40rpx;
		height: 40rpx;
		float: right;
		padding-right: 100rpx;
		padding-top: 30rpx;
	}

	.uni-ec-canvas {
		margin-top: 22rpx;
		width: 100%;
		height: 640rpx;
		display: block;
	}

	.john_chart_title {
		display: flex;
		padding-left: 8%;
		padding-right: 8%;
		color: #666;
		font-size: 28rpx;

		.item {
			// line-height: 64rpx;
			flex: 1;
			text-align: right;
			position: relative;

			&:first-child {
				margin-right: 10%;
			}
		}

		.hr {
			border-top: 1rpx dashed #D41F2D;
			width: 120rpx;
			display: inline-block;
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);

			&.color1 {
				border-top-color: #D41F2D;
			}
		}
	}
</style>
